﻿@page "/timeline"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Timeline
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    <strong>RadzenTimeline</strong> component is a graphical representation used to display a chronological sequence of events or data points. It allows users to visualize and interact with time-based information, making it easier to grasp the sequence of events. The timeline consists of a line with markers or data points positioned along it, each corresponding to a specific moment or period in time.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase chronological event visualization with horizontal/vertical orientation options, configurable line position and content placement using <code>LinePosition</code> and <code>Reverse</code>, content alignment with <code>AlignItems</code>, CSS variable styling for line width and color, customizable point sizes/styles/variants/shadows, and rich point content with text and imagery.
</RadzenText>

<RadzenText Anchor="timeline#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Basic Usage
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Display events chronologically in a vertical timeline with customizable points and content.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelineBasic">
    <TimelineBasic />
</RadzenExample>

<RadzenText Anchor="timeline#orientation-and-position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Orientation and Position
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>Orientation</code> sets the timeline's alignment to horizontal or vertical. Use <code>LinePosition</code> in combination with <code>Reverse</code> to specify the position of <code>&lt;LabelContent&gt;</code> and <code>&lt;ChildContent&gt;</code> content with respect to the line.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelineOrientation">
    <TimelineOrientation />
</RadzenExample>

<RadzenText Anchor="timeline#align-items" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Align Items
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set the <code>AlignItems</code> property to <code>&lt;RadzenTimeLine&gt;</code> to specify the alignment of Timeline items' content, namely <code>&lt;PointContent&gt;</code>, <code>&lt;LabelContent&gt;</code> and <code>&lt;ChildContent&gt;</code> content.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelineAlignItems">
    <TimelineAlignItems />
</RadzenExample>

<RadzenText Anchor="timeline#line-width" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Styling
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use CSS variables to adjust line width and color.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelineStyling">
    <TimelineStyling />
</RadzenExample>

<RadzenText Anchor="timeline#point-size" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Point Size
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set the <code>PointSize</code> property to <code>&lt;RadzenTimeLineItem&gt;</code> to specify the item's point size.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelinePointSize">
    <TimelinePointSize />
</RadzenExample>

<RadzenText Anchor="timeline#point-style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Point Style
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set the <code>PointStyle</code> property to <code>&lt;RadzenTimeLineItem&gt;</code> to change the item's point style.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelinePointStyle">
    <TimelinePointStyle />
</RadzenExample>

<RadzenText Anchor="timeline#point-variant" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Point Variant
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set the <code>PointVariant</code> property to <code>&lt;RadzenTimeLineItem&gt;</code> to change the item's point variant.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelinePointVariant">
    <TimelinePointVariant />
</RadzenExample>

<RadzenText Anchor="timeline#point-shadow" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Point Shadow
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set the <code>PointShadow</code> property to <code>&lt;RadzenTimeLineItem&gt;</code> to specify the size of the item's point shadow.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelinePointShadow">
    <TimelinePointShadow />
</RadzenExample>

<RadzenText Anchor="timeline#point-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Point Content
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>&lt;PointContent&gt;</code> can fit in text and imagery.
</RadzenText>
<RadzenExample ComponentName="Timeline" Example="TimelinePointContent">
    <TimelinePointContent />
</RadzenExample>